<template>
  <div class="h-full m-relative">
    <div class="px-20 pb-2 flex-col h-full overflow-y-auto">
      <div class="round-14 bgfff p-20 px-50 flex flex-a-c flex-j-a mb-10">
        <div class="flex-col-center">
          <span class="mb-6 textccc">打款用户数（人）</span>
          <div class="flex flex-a-c font-bold text-size-24">
            <div class="m-relative">
              <span>{{ amount.totalCount }}</span>
              <span class="m-absolute position-center-x text-size-14 nowrap" style="bottom: -20px">总</span>
            </div>
            <span class="mx-14 textccc">/</span>
            <div class="m-relative" style="color: #43cf7c">
              <span>{{ amount.successCount }}</span>
              <span class="m-absolute position-center-x text-size-14 nowrap" style="bottom: -20px">成功</span>
            </div>
            <span class="mx-14 textccc">/</span>
            <div class="m-relative" style="color: red">
              <span>{{ amount.failCount }}</span>
              <span class="m-absolute position-center-x text-size-14 nowrap" style="bottom: -20px">失败</span>
            </div>
          </div>
        </div>
        <div class="h-full mt-20" style="width: 2px; background: #e8e8e8"></div>
        <div class="flex-col-center">
          <span class="mb-6 textccc">打款金额（元）</span>
          <div class="flex flex-a-c font-bold text-size-24">
            <div class="m-relative">
              <span>￥{{ amount.totalAmount }}</span>
              <span class="m-absolute position-center-x text-size-14 nowrap" style="bottom: -20px">总</span>
            </div>
            <span class="mx-14 textccc">/</span>
            <div class="m-relative" style="color: #43cf7c">
              <span>￥{{ amount.successAmount }}</span>
              <span class="m-absolute position-center-x text-size-14 nowrap" style="bottom: -20px">成功</span>
            </div>
            <span class="mx-14 textccc">/</span>
            <div class="m-relative" style="color: red">
              <span>￥{{ amount.failAmount }}</span>
              <span class="m-absolute position-center-x text-size-14 nowrap" style="bottom: -20px">失败</span>
            </div>
          </div>
        </div>
      </div>
      <div class="round-14 bgfff p-20 flex-1 flex-col">
        <a-form
          label-align="right"
          layout="inline"
          auto-label-width
          :model="listParams"
          size="small"
          class="form my-10"
        >
          <a-form-item field="status" hide-label>
            <a-select class="w-40n" v-model="listParams.status" placeholder="请选择打款状态" @change="changeCurrent(1)">
              <a-option value="" label="全部"></a-option>
              <a-option :value="1" label="签约中"></a-option>
              <a-option :value="2" label="签约成功"></a-option>
              <a-option :value="3" label="打款中"></a-option>
              <a-option :value="4" label="打款成功"></a-option>
              <a-option :value="20" label="签约失败"></a-option>
              <a-option :value="40" label="打款失败"></a-option>
            </a-select>
          </a-form-item>
          <a-form-item field="inviteCode" hide-label>
            <a-input
              class="w-80n"
              v-model="listParams.keyword"
              placeholder="输入收款姓名/手机号/身份证号/流水凭证"
              @press-enter="changeCurrent(1)"
              allow-clear
            >
            </a-input>
          </a-form-item>
          <a-form-item hide-label>
            <a-space>
              <a-button type="primary" size="small" @click="changeCurrent(1)">
                <template #icon>
                  <icon-search />
                </template>
                <template #default>查询</template>
              </a-button>
              <a-button size="small" @click="onResetSearch">
                <template #icon>
                  <icon-sync />
                </template>
                <template #default>重置</template>
              </a-button>
            </a-space>
          </a-form-item>
        </a-form>
        <div class="w-full flex-1 overflower-hidden m-relative">
          <div class="m-absolute t-0 b-0 r-0 l-0 flex">
            <GiTable
              row-key="id"
              id="internalPaymentDetail"
              v-model:columns="columns"
              :loading="loading"
              :data="tableData"
              :scroll="{ x: '100%', y: '100%', minWidth: 1000 }"
              :pagination="pagination"
              @refresh="getTableData"
            >
              <template #custom-extra>
                <a-alert type="warning">
                  <span class="font-bold text-red"
                    >打款平台：{{ amount.payAccountName }}， 支付路径：{{ amount.payTypeName }}， 任务创建时间：{{
                      props.params.submitAt
                    }}</span
                  >
                </a-alert>
              </template>
              <template #user="{ record }">
                <div class="flex-col">
                  <span>{{ record.name }}</span>
                  <span>{{ record.idCard }}</span>
                </div>
              </template>
              <template #status="{ record }">
                <a-tag
                  :color="
                    record.status == 1
                      ? '#165dff'
                      : record.status == 2
                      ? '#7bc616'
                      : record.status == 3
                      ? '#165dff'
                      : record.status == 4
                      ? '#00b42a'
                      : record.status == 20
                      ? '#f53f3f'
                      : record.status == 40
                      ? '#f53f3f'
                      : record.status == 41
                      ? '#b71de8'
                      : '#86909c'
                  "
                  >{{
                    record.status == 1
                      ? '签约中'
                      : record.status == 2
                      ? '签约成功'
                      : record.status == 3
                      ? '打款中'
                      : record.status == 4
                      ? '打款成功'
                      : record.status == 20
                      ? '签约失败'
                      : record.status == 40
                      ? '打款失败'
                      : record.status == 41
                      ? '退款成功'
                      : '--'
                  }}</a-tag
                >
              </template>
              <template #money="{ record }">
                <div class="flex-col flex-j-s font-bold">
                  <span>￥{{ record.amount }}</span>
                  <span
                    >{{ record.payType == 1 ? '支付宝' : record.payType == 2 ? '银行卡' : '--' }} |
                    {{ record.payType == 1 ? record.alipayNo : `${record.bankName}：${record.bankCard}` }}</span
                  >
                </div>
              </template>
              <template #time="{ record }">
                <div class="flex-col">
                  <span>{{ record.paidAt || '--' }}</span>
                </div>
              </template>
              <template #orderSn="{ record }">
                <div class="flex-col">
                  <span>流水号：{{ record.orderSn }}</span>
                </div>
              </template>
            </GiTable>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { usePagination } from '@/hooks'
import { reAssign, deleteEmpty } from '@/utils/common'
import { lgLogSearch, lgLogGetTaskInfo } from '@/apis'
const props = defineProps(['params', 'onClose'])

const columns = ref([
  {
    title: '用户',
    width: 220,
    slotName: 'user'
  },
  {
    title: '打款状态',
    width: 110,
    align: 'center',
    slotName: 'status'
  },
  {
    title: '打款金额',
    width: 220,
    slotName: 'money'
  },
  {
    title: '打款时间',
    width: 220,
    slotName: 'time'
  },
  {
    title: '打款凭证',
    width: 180,
    slotName: 'orderSn'
  },
  {
    title: '备注',
    width: 130,
    render: ({ record }) => {
      return record.resultPayDesc || '--'
    }
  }
])

const loading = ref(false)
const tableData = ref([])
const amount = reactive({
  failAmount: 0,
  failCount: 0,
  successAmount: 0,
  successCount: 0,
  taskCount: 0,
  totalAmount: 0,
  totalCount: 0,
  payAccountName: undefined,
  payTypeName: undefined
})
const listParams = reactive({
  status: props.params.target,
  keyword: undefined,
  taskId: undefined,
  page: 1,
  pageSize: 15
})
const { pagination, setTotal } = usePagination(() => getTableData(), { defaultPageSize: listParams.pageSize })

const getTaskListStatisticsFun = async () => {
  const res = await lgLogGetTaskInfo({ taskId: listParams.taskId })
  reAssign(amount, res.data)
}

// 获取列表数据
const getTableData = async () => {
  try {
    loading.value = true
    listParams.page = pagination.current
    listParams.pageSize = pagination.pageSize
    getTaskListStatisticsFun()
    const res = await lgLogSearch(deleteEmpty(listParams))
    tableData.value = res.data.list
    setTotal(res?.data?.meta?.pagination?.total || 0)
  } finally {
    loading.value = false
  }
}

// 表格页码改变
const changeCurrent = (e) => {
  pagination.current = listParams.page = e
  getTableData()
}

onMounted(() => {
  listParams.taskId = props.params.id
  changeCurrent(1)
})

// 重置筛选查询
const onResetSearch = () => {
  listParams.status = listParams.keyword = undefined
  changeCurrent(1)
}
</script>

<style lang="scss" scoped>
.table-page {
  background: transparent;
}
</style>
